Using Conditional Branches, Variables, and Calculations with CSS

I was under the impression that it was something that switched between the print screen and the normal screen (it's called "media").

But screen size can be added to the conditional expression

The :root pseudo-class can be used in place of the global scope.

It can be calculated with calc().

Can be retrieved by JS.

getComputedStyle(document.body).getPropertyValue("--toolbar-height")

Since it's a string, if we assume units, it looks like this

code:ts

const toolbarHeight = parseInt(

getComputedStyle(document.body)

.getPropertyValue("--toolbar-height")

.trim()

);

css to shrink the height of the toolbar and buttons when the width is narrow

code:css

:root {

--toolbar-height: 60px;

}

@media only screen and (max-width: 600px) {

:root {

--toolbar-height: 36px;

}

}

height: var(--toolbar-height);

}

height: calc(var(--toolbar-height) * 0.8);

margin: calc(var(--toolbar-height) * 0.1) 0 calc(var(--toolbar-height) * 0.1) 0;

}

code:css

/* Spacers to divide 7 buttons into 3 groups */

margin-left: calc((100vw - var(--button-size) * 7) / 2);

}

digression

Can also pattern-match to class names.

---